import React from 'react'
import { connect } from 'react-redux'
import { deepCopy, messages, uniquelizeArray ,isEmptyObj} from "share/common"
import TagSelect from 'ant-design-pro/lib/TagSelect'
import { Form, Modal, Icon, Checkbox, List, message, Tag, Button, Spin, Row, Col } from 'antd'
const ListItem = List.Item;
import Condition from 'components/condition'
const { If } = Condition;
import ListSelector from 'components/list-selector'
import CCService from 'containers/setting/cost-center/cost-center.service'
import newWorkflowService from 'containers/setting/new-workflow/new-workflow.service'
class NewAddPersonModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      loadingAddPerson: false, //添加审批人员的loading
      userVisible: false,
      userGroupVisible: false,
      hasGetCostCenter: false, //是否已获取了成本中心审批者
      allApproverType: null, //审批人类型
      costCenterApprover: null, //单据上成本中心主管审批者
      costCenterDeptApprover: null, //单据上成本中心主要部门经理审批者
      depByApplicantKeys: [],
      depByDeptKeys: [],
      depByParticipantKeys: [],
      costCenterKeys: [],
      costCenterDeptKeys: [],
      financeKeys: [],
      containsApportionmentDepartmentManager: false, //分摊组织领导会签
      containsApportionmentCostCenterManager: false, //分摊成本中心经理会签
      containsApportionmentCostCenterPrimaryDepartmentManager: false, //分摊后，对应的部门经理会签
      containsApportionmentCostCenterExtendUser: false, //成本中心动态人员
      directManager: false,
      accountBelongManager: false,//费用归属人直属领导
      apiReturnApprover: false,
      approveUser: [], //指定人员审批
      approveUserGroup: [], //指定人员组审批
      defaultApproveUserOID: [], //默认审批人员OID
      defaultApproveUserGroupOID: [], //默认审批人员组OID
      approverNotChange: true, //审批人没有发生改变
      departmentByLeader: [], //按申请人所在的组织架构审批的审批人
      departmentByBill: [],  //按单据上的组织架构审批的审批人
      departmentByParticipant: [],//按参与人的组织架构审批
      workflowFinanceRoleList: [],
      costItemList:[],
      costAutoApproverObj:{},
      costCenterAutoKeys: [],
      costCenterAutoSelectKeysObj: {},
      costCenterOIDKeys:[],
      costCenterOIDKeysObj:{},
      approvalDirectManager: false,
      approvalParticipant: false,
      approvalCreate: false,
    }
  }

  componentDidMount() {
    this.getApproverType();
    this.setDefaultUserAndGroup(this.props.ruleBranchApprover || {})
  }

  componentWillReceiveProps(nextProps) {
    !this.state.hasGetCostCenter && this.getCostCenterApprover();
    this.getApproverType();
    this.getWorkflowRoleList();
    this.setDefaultUserAndGroup(nextProps.ruleBranchApprover || {});
    this.setState({
      hasGetCostCenter: !!this.props.formInfo.customFormFields,
      depByApplicantKeys: [],
      financeKeys: [],
      depByDeptKeys: [],
      depByParticipantKeys: [],
      costCenterKeys: [],
      costCenterDeptKeys: [],
      containsApportionmentDepartmentManager: false,
      containsApportionmentCostCenterManager: false,
      containsApportionmentCostCenterPrimaryDepartmentManager: false,
      containsApportionmentCostCenterExtendUser: false,
      approvalDirectManager: false,
      approvalParticipant: false,
      approvalCreate: false,
      directManager: false,
      apiReturnApprover: false,
      accountBelongManager: false,
      participant: false,
      costCenterFields: [],
      costCenterAutoSelectKeysObj:{},
    })
  }

  hasParticipant = () => {
    //select_participant
    let flag = false;
    if (!!this.props.formInfo.customFormFields) {
      this.props.formInfo.customFormFields.map(item => {
        if (item.messageKey === 'select_participant') {
          return flag = true
        }
      })
    }
    return flag
  };

  //获取审批人类型
  getApproverType = () => {
    this.setState({ allApproverType: this.props.workflowApproverType }, () => {
      let departmentByLeader = this.state.allApproverType[1100] || [];
      let departmentByBill = this.state.allApproverType[2200] || [];
      let departmentByParticipant = this.state.allApproverType[3300] || [];
      if (departmentByLeader.length || departmentByBill.length || departmentByParticipant.length) {
        this.getDepartmentI18N(departmentByLeader, departmentByBill, departmentByParticipant)
      } else {
        this.setState({ departmentByLeader, departmentByBill, departmentByParticipant })
      }
    });
  };

  getWorkflowRoleList = () => {
    let {workflowFinanceRoleList} = this.state;
    workflowFinanceRoleList = [];
    if (JSON.stringify(this.props.workflowRoleList) !== '{}') {
      this.props.workflowRoleList.map(item => {
        if(item.permissionCategory ===  "FINANCE"){
          workflowFinanceRoleList.push(item)
        }
      });
      this.setState({ workflowFinanceRoleList })
    }
  }

  //获取组织架构的多语言
  getDepartmentI18N = (departmentByLeader, departmentByBill, departmentByParticipant) => {
    let { workflowDepartmentPosition } = this.props;
    workflowDepartmentPosition && JSON.stringify(workflowDepartmentPosition) !== '{}' && (workflowDepartmentPosition || []).map(item => {
      departmentByLeader.map(departmentItem => {
        if (String(departmentItem.key) === String(item.positionCode)) {
          departmentItem.value = item.positionName
        }
      });
      departmentByBill.map(departmentItem => {
        if (String(departmentItem.key) === String(item.positionCode)) {
          departmentItem.value = item.positionName
        }
      });
      departmentByParticipant.map(departmentItem => {
        if (String(departmentItem.key) === String(item.positionCode)) {
          departmentItem.value = item.positionName
        }
      });
    });
    this.setState({ loading: false, departmentByLeader, departmentByBill, departmentByParticipant })
  };

  //获取单据上成本中心主管审批者
  getCostCenterApprover = () => {
    let costCenterFields = [];
    let costCenterApprover = [];
    let costCenterDeptApprover = [];
    let { costItemList,costAutoApproverObj,costCenterOIDKeys } = this.state;
    (this.props.formInfo.customFormFields || []).map(item => {
      if (item.messageKey === 'select_cost_center'){
        costCenterFields.push(item);
        if (item.dataSource && JSON.parse(item.dataSource)) {
          costCenterOIDKeys.push(JSON.parse(item.dataSource).costCenterOID);
        }
      }
    });
    if(costCenterOIDKeys && !!costCenterOIDKeys.length){
      newWorkflowService.postApproverCostCenter({ costCenterOIDList: costCenterOIDKeys })
        .then(res => {
          let data = res.data;
          costAutoApproverObj = data;
          this.setState({ costAutoApproverObj });
        });
    }
    this.setState({ loading: true });
    costCenterFields.map(item => {
      let costCenterItem = {
        code: null,
        name: null,
        key: 6002,
        remark: messages('setting.key1261'/*按单据上的成本中心经理审批*/),
        ruleApprovalNodeOID: null,
        approverEntityOID: null,
        value: item.fieldName
      };
      let costCenterDeptItem = {
        code: null,
        name: null,
        key: 6004,
        remark: messages('setting.key1265'/*按单据上的成本中心的主要部门经理审批*/),
        ruleApprovalNodeOID: null,
        approverEntityOID: null,
        value: item.fieldName
      }
      costItemList = [];
      if (item.dataSource && JSON.parse(item.dataSource)) {
        costCenterItem.approverEntityOID = JSON.parse(item.dataSource).costCenterOID;
        costCenterDeptItem.approverEntityOID = JSON.parse(item.dataSource).costCenterOID;
        if (costCenterItem.approverEntityOID) {
          CCService.getCostCenterDetail(costCenterItem.approverEntityOID).then(res => {
            costCenterItem.value = res.data.name;
            costCenterDeptItem.value = res.data.name;
            costItemList.push(res.data);
            costCenterDeptApprover.push(costCenterDeptItem)
            costCenterApprover.push(costCenterItem)
          })
        }
      }
      this.setState({
        costItemList,
        loading: false,
        costCenterDeptApprover,
        costCenterApprover,
        costCenterAutoSelectKeysObj: {}
      });
    })
  };

  //设置默认的审批人员和人员组
  setDefaultUserAndGroup = (ruleBranchApprover) => {
    let approveUser = [];
    let approveUserGroup = [];
    let defaultApproveUserOID = [];
    let defaultApproveUserGroupOID = [];
    for(let key in ruleBranchApprover) {
      ruleBranchApprover['6001'] && ruleBranchApprover['6001'].map(item => {
        item.userOID = item.approverEntityOID;
        item.fullName = item.name;
        approveUser.push(item);
        defaultApproveUserOID.push(item.approverEntityOID)
      });
      ruleBranchApprover['6003'] && ruleBranchApprover['6003'].map(item => {
        item.userGroupOID = item.approverEntityOID;
        approveUserGroup.push(item);
        defaultApproveUserGroupOID.push(item.approverEntityOID)
      });
    }
    approveUser = uniquelizeArray(approveUser);
    defaultApproveUserOID = uniquelizeArray(defaultApproveUserOID);
    approveUserGroup = uniquelizeArray(approveUserGroup);
    defaultApproveUserGroupOID = uniquelizeArray(defaultApproveUserGroupOID);
    this.setState({ approveUser, approveUserGroup, defaultApproveUserOID, defaultApproveUserGroupOID })
  };

  //新增指定人员审批
  handleAddUser = (value) => {
    this.setState({
      userVisible: false,
      approveUser: value.result || []
    })
  };

  //删除指定人员审批
  handleDeleteUser = (userOID) => {
    let approveUser = this.state.approveUser;
    let defaultApproveUserOID = this.state.defaultApproveUserOID;
    defaultApproveUserOID.delete(userOID);
    approveUser && approveUser.map((item, index) => {
      if (item.userOID === userOID) {
        approveUser.splice(index, 1);
        item.ruleApproverOID && this.props.onDelete(item)
      }
    });
    this.setState({ approveUser, defaultApproveUserOID, approverNotChange: false })
  };

  //新增指定人员组审批
  handleAddUserGroup = (value) => {
    this.setState({
      userGroupVisible: false,
      approveUserGroup: value.result
    })
  };

  //删除指定人员组审批
  handleDeleteUserGroup = (oid) => {
    let approveUserGroup = this.state.approveUserGroup;
    let defaultApproveUserGroupOID = this.state.defaultApproveUserGroupOID;
    defaultApproveUserGroupOID.delete(oid);
    approveUserGroup && approveUserGroup.map((item, index) => {
      if (item.userGroupOID === oid) {
        approveUserGroup.splice(index, 1);
        item.ruleApproverOID && this.props.onDelete(item)
      }
    });
    this.setState({ approveUserGroup, defaultApproveUserGroupOID, approverNotChange: false })
  };

  //点击"确定"
  handleOK = () => {
    const { ruleApprovalNodeOID, ruleBranchApprover } = this.props;
    const {
      allApproverType, costCenterApprover, costCenterDeptApprover, depByApplicantKeys,
      depByDeptKeys, depByParticipantKeys, costCenterKeys,
      costCenterDeptKeys, directManager, accountBelongManager, participant,
      apiReturnApprover, containsApportionmentDepartmentManager,
      containsApportionmentCostCenterManager, containsApportionmentCostCenterPrimaryDepartmentManager,
      containsApportionmentCostCenterExtendUser,
      approveUser, approveUserGroup, defaultApproveUserOID,
      defaultApproveUserGroupOID, financeKeys, workflowFinanceRoleList,
      approvalDirectManager, approvalParticipant, approvalCreate,
      costItemList,costCenterAutoSelectKeysObj,costAutoApproverObj,
    } = this.state;
    this.setState({ loadingAddPerson: true });
    let newParams = ruleBranchApprover;
    //成本中心扩展人员
    costItemList.map(item => {
      if (costCenterAutoSelectKeysObj[item.costCenterOID] && !!costCenterAutoSelectKeysObj[item.costCenterOID].length) {
        let name = costAutoApproverObj[item.costCenterOID].costCenter.name;
        let customFormFieldDTOS = costAutoApproverObj[item.costCenterOID].customFormFieldDTOS;
        costCenterAutoSelectKeysObj[item.costCenterOID].map(approver => {
          customFormFieldDTOS.map(data => {
            if (approver === data.id) {
              (newParams['6006'] || []).push({
                approverEntityId: data.id,//成本中心扩展人员id
                containsApportionmentCostCenterExtendUser,//是否含分摊
                approverEntityOID: item.costCenterOID,//成本中心oid
                approverType: 6006,
                name: name + '：' + data.fieldName,
                remark: name,
              })
            }
          })
        })
      }
    });
    //todo
    financeKeys.map(key => {
      workflowFinanceRoleList.map(item => {
        if (item.id === key) {
          (newParams['6005'] || []).push({
            approverEntityId: key,
            approverType: 6005,
            name: item.permissionName,
            remark: item.permissionName,
          })
        }
      })
    });
    depByApplicantKeys.map(key => {
      allApproverType[1100].map(item => {
        if (item.key === key) {
          (newParams['1100'] || []).push({
            departmentType: 1,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID
          })
        }
      })
    });
    depByDeptKeys.map(key => {
      allApproverType[2200].map(item => {
        if (item.key === key) {
          (newParams['2200'] || []).push({
            departmentType: 2,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID,
            containsApportionmentDepartmentManager
          })
        }
      })
    });
    depByParticipantKeys.map(key => {
      (allApproverType[3300] || []).map(item => {
        if (item.key === key) {
          (newParams['3300'] || []).push({
            departmentType: 3,
            code: null,
            name: item.value,
            remark: item.remark,
            approverType: key,
            level: 1,
            ruleApprovalNodeOID,
            containsApportionmentDepartmentManager
          })
        }
      })
    });
    costCenterKeys.map(oid => {
      costCenterApprover.map(item => {
        if (item.approverEntityOID === oid) {
          (newParams['6002'] || []).push({
            code: item.code,
            remark: item.remark,
            name: item.value,
            approverType: 6002,
            approverEntityOID: oid,
            ruleApprovalNodeOID,
            containsApportionmentCostCenterManager
          })
        }
      })
    });
    costCenterDeptKeys.map(oid => {
      costCenterDeptApprover.map(item => {
        if (item.approverEntityOID === oid) {
          (newParams['6004'] || []).push({
            code: item.code,
            remark: item.remark,
            name: item.value,
            approverType: 6004,
            approverEntityOID: oid,
            ruleApprovalNodeOID,
            level: 1,
            containsApportionmentCostCenterPrimaryDepartmentManager
          })
        }
      })
    });
    approvalDirectManager && (newParams['6500'] || []).push({
      approverType: 6501,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1302')/*申请人*/,
    });
    approvalCreate && (newParams['6500'] || []).push({
      approverType:  6503,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key2242')/*制单人*/,
    });
    approvalParticipant && (newParams['6500'] || []).push({
      approverType:   6502,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1923')/*参与人*/,
    });
    directManager && (newParams['6600'] || []).push({
      approverType: 6100,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1302')/*申请人*/,
      level: 1,
    });
    accountBelongManager && (newParams['6600'] || []).push({
      approverType: 6300,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1730')/*费用归属人*/,
      level: 1,
    });
    participant && (newParams['6600'] || []).push({
      approverType: 6400,
      ruleApprovalNodeOID,
      departmentType: null,
      name: messages('setting.key1923')/*参与人*/,
      level: 1,
    });
    apiReturnApprover && (newParams['1004'] || []).push({
      approverType: 1004,
      ruleApprovalNodeOID,
      name: messages('setting.key1651')/*外部接口*/
    });
    approveUser && approveUser.map(item => {
      let itemHasExist = false;
      defaultApproveUserOID.map(oid => {
        item.userOID === oid && (itemHasExist = true)
      });
      !itemHasExist && (newParams['6001'] || []).push({
        approverType: 6001,
        ruleApprovalNodeOID,
        name: item.fullName,
        approverEntityOID: item.userOID
      })
    });
    approveUserGroup && approveUserGroup.map(item => {
      let itemHasExist = false;
      defaultApproveUserGroupOID.map(oid => {
        item.userGroupOID === oid && (itemHasExist = true)
      });
      !itemHasExist && (newParams['6003'] || []).push({
        approverType: 6003,
        ruleApprovalNodeOID,
        name: item.name,
        approverEntityOID: item.userGroupOID
      })
    });
    this.handleAddApprover(newParams)
  };

  //添加审批人
  handleAddApprover = (params) => {
    this.setState({ loadingAddPerson: false, costCenterAutoSelectKeysObj: {} });
    this.props.onSelect(params);
  };

  onChangeCostCenterAutoKey = (values, oid) => {
    let { costCenterAutoSelectKeysObj } = this.state;
    costCenterAutoSelectKeysObj[oid] = values;
    this.setState({ costCenterAutoSelectKeysObj });
  };

  render() {
    const { visible, personType } = this.props;
    const {
      loading, userVisible, userGroupVisible, approveUser, approveUserGroup, depByApplicantKeys, depByDeptKeys,
      depByParticipantKeys, costCenterKeys, costCenterDeptKeys,
      containsApportionmentDepartmentManager, containsApportionmentCostCenterManager,
      containsApportionmentCostCenterPrimaryDepartmentManager,
      directManager, accountBelongManager, participant, apiReturnApprover, costCenterApprover,
      costCenterDeptApprover, loadingAddPerson, departmentByLeader, departmentByBill,
      departmentByParticipant, workflowFinanceRoleList, financeKeys, containsApportionmentCostCenterExtendUser, costItemList,
      costAutoApproverObj,costCenterAutoSelectKeysObj, approvalDirectManager, approvalParticipant, approvalCreate,
    } = this.state;
    let nodeTitle = '';
    switch(personType) {
      case 1:
        nodeTitle = messages('setting.key1248')/*审批*/;
        break;
      case 2:
        nodeTitle = messages('setting.key1272')/*知会*/;
        break;
      case 3:
        nodeTitle = messages('setting.key2187')/*审核*/;
        break;
    }
    return (
      <div className='add-person-modal'>
        <div className="select-person-modal-container"/>
        <Modal
          title={messages('setting.key2188',{arg1: nodeTitle})/*请选择{arg1}人员*/}
          visible={visible}
          closable={false}
          className="refactoring-modal"
          footer={<Button type="primary" loading={loadingAddPerson}
                          onClick={this.handleOK}>{messages('common.ok')}</Button>}
        >
          <Spin spinning={loading}>
            <If value={personType === 1 || personType === 2}>
              <List itemLayout="horizontal">
                <ListItem className="dep-by-applicant">
                  <h4>
                    {personType === 1 ? messages('setting.key1255'/*按申请人所在的组织架构审批*/) :
                      messages('setting.key1256'/*按申请人所在的组织架构知会*/)}
                  </h4>
                  <TagSelect
                    value={depByApplicantKeys}
                    onChange={value => this.setState({ depByApplicantKeys: value })}>
                    {(departmentByLeader || []).map(item => (
                      <TagSelect.Option value={item.key} key={item.key}>{item.value}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>
                <ListItem className="dep-by-bill">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1257'/*按单据上的组织架构审批*/) :
                        messages('setting.key1258'/*按单据上的组织架构知会*/)}
                    </h4>
                    <Checkbox
                      checked={containsApportionmentDepartmentManager}
                      onChange={e => this.setState({ containsApportionmentDepartmentManager: e.target.checked })}>
                      {personType === 1 ? messages('setting.key1259'/*分摊组织领导会签*/) :
                        messages('setting.key1260'/*知会分摊组织领导*/)}
                    </Checkbox>
                  </div>
                  <TagSelect value={depByDeptKeys} onChange={value => this.setState({ depByDeptKeys: value })}>
                    {(departmentByBill || []).map(item => (
                      <TagSelect.Option value={item.key} key={item.key + 'dept'}>{item.value}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>
                {this.hasParticipant() && <ListItem className="dep-by-bill">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1924')/*按参与人的组织架构审批*/ :
                        messages('setting.key1925')/*按参与人的组织架构知会*/}
                    </h4>
                  </div>
                  <TagSelect
                    value={depByParticipantKeys}
                    onChange={value => this.setState({ depByParticipantKeys: value })}>
                    {(departmentByParticipant || []).map(item => (
                      <TagSelect.Option value={item.key} key={item.key + 'participant'}>{item.value}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>}
                {costCenterApprover && !!costCenterApprover.length && (
                  <ListItem className="cost-center">
                    <div>
                      <h4>
                        {personType === 1 ? messages('setting.key1261'/*按单据上的成本中心经理审批*/) :
                          messages('setting.key1262'/*按单据上的成本中心经理知会*/)}
                      </h4>
                      <Checkbox
                        checked={containsApportionmentCostCenterManager}
                        onChange={e => this.setState({ containsApportionmentCostCenterManager: e.target.checked })}>
                        {personType === 1 ? messages('setting.key1263'/*分摊成本中心经理会签*/) :
                          messages('setting.key1264'/*知会分摊成本中心经理*/)}
                      </Checkbox>
                    </div>
                    <TagSelect value={costCenterKeys} onChange={values => this.setState({ costCenterKeys: values })}>
                      {costCenterApprover.map(item => (
                        <TagSelect.Option value={item.approverEntityOID}
                                          key={item.approverEntityOID}>{item.value}</TagSelect.Option>
                      ))}
                    </TagSelect>
                  </ListItem>
                )}
                {costCenterDeptApprover && !!costCenterDeptApprover.length && (
                  <ListItem className="cost-center-dept">
                    <div>
                      <h4>
                        {personType === 1 ? messages('setting.key1265'/*按单据上的成本中心的主要部门经理审批*/) :
                          messages('setting.key1266'/*按单据上的成本中心的主要部门经理知会*/)}
                      </h4>
                      <Checkbox
                        checked={containsApportionmentCostCenterPrimaryDepartmentManager}
                        onChange={e => this.setState({ containsApportionmentCostCenterPrimaryDepartmentManager: e.target.checked })}>
                        {personType === 1 ? messages('setting.key1267'/*分摊后，对应的部门经理会签*/) :
                          messages('setting.key1268'/*分摊后，知会对应的部门经理*/)}
                      </Checkbox>
                    </div>
                    <TagSelect
                      value={costCenterDeptKeys}
                      onChange={values => this.setState({ costCenterDeptKeys: values })}>
                      {costCenterDeptApprover.map(item => (
                        <TagSelect.Option
                          value={item.approverEntityOID}
                          key={item.approverEntityOID}>
                          {item.value}
                        </TagSelect.Option>
                      ))}
                    </TagSelect>
                  </ListItem>
                )}
                {costItemList && !!costItemList.length && !isEmptyObj(costAutoApproverObj) &&
                <ListItem className="cost-center-dept">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key2189')/*按单据上的成本中心的成本中心扩展人员审批*/ :
                        messages('setting.key2190')/*按单据上的成本中心的成本中心扩展人员知会*/}
                    </h4>
                    <Checkbox
                      checked={containsApportionmentCostCenterExtendUser}
                      onChange={e => this.setState({ containsApportionmentCostCenterExtendUser: e.target.checked })}>
                      {personType === 1 ? messages('setting.key2191')/*分摊后，对应的成本中心扩展人员会签*/ :
                        messages('setting.key2192')/*分摊后，知会对应的成本中心扩展人员会签*/}
                    </Checkbox>
                  </div>
                  {costItemList.map(item => {
                    return (costAutoApproverObj[item.costCenterOID]  &&
                    <Row type="flex" align="middle">
                      <Col span={3}>{item.name}:</Col>
                      <Col>
                        <TagSelect
                          value={costCenterAutoSelectKeysObj[item.costCenterOID] || []}
                          onChange={values => this.onChangeCostCenterAutoKey(values, item.costCenterOID)}>
                          {costAutoApproverObj[item.costCenterOID] &&
                          costAutoApproverObj[item.costCenterOID].customFormFieldDTOS &&
                          !!costAutoApproverObj[item.costCenterOID].customFormFieldDTOS.length &&
                          costAutoApproverObj[item.costCenterOID].customFormFieldDTOS.map(approver => {
                            return <TagSelect.Option
                                     value={approver.id}
                                     key={approver.id}>
                                     {approver.fieldName}
                                   </TagSelect.Option>
                          })
                          }
                        </TagSelect>
                      </Col>
                    </Row>)
                  })}
                </ListItem>}
                <ListItem className="direct-manager">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key2243')/*按以下人员审批*/ : messages('setting.key2244')/*按以下人员知会*/}
                    </h4>
                  </div>
                  <Checkbox
                    checked={approvalDirectManager}
                    onChange={e => this.setState({ approvalDirectManager: e.target.checked })}>
                    {messages('setting.key1302')/*申请人*/}
                  </Checkbox>
                  <Checkbox
                    checked={approvalCreate}
                    onChange={e => this.setState({ approvalCreate: e.target.checked })}>
                    {messages('setting.key2242')/*制单人*/}
                  </Checkbox>
                  {this.hasParticipant() &&
                  <Checkbox
                    checked={approvalParticipant}
                    onChange={e => this.setState({ approvalParticipant: e.target.checked })}>
                    {messages('setting.key1923')/*参与人*/}
                  </Checkbox>}
                </ListItem>
                <ListItem className="direct-manager">
                  <div>
                    <h4>{personType === 1 ? messages('setting.key1795')/*按以下人员信息中的【直属领导】审批*/ :
                      messages('setting.key1796')/*按以下人员信息中的【直属领导】知会*/}
                    </h4>
                  </div>
                  <Checkbox
                    checked={directManager}
                    onChange={e => this.setState({ directManager: e.target.checked })}>
                    {messages('setting.key1302')/*申请人*/}
                  </Checkbox>
                  {this.props.formInfo.formType && String(this.props.formInfo.formType).charAt(0) === '3'
                  && (<Checkbox
                      checked={accountBelongManager}
                      onChange={e => this.setState({ accountBelongManager: e.target.checked })}>
                      {messages('setting.key1730')/*费用归属人*/}（{messages('setting.key1731')/*会签*/}）
                    </Checkbox>
                  )}
                  {this.hasParticipant() &&
                  <Checkbox
                    checked={participant}
                    onChange={e => this.setState({ participant: e.target.checked })}>
                    {messages('setting.key1923')/*参与人*/}({messages('setting.key1731')/*会签*/}）
                  </Checkbox>}
                </ListItem>
                <ListItem className="user-approver">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1273'/*指定人员审批*/) :
                        messages('setting.key1274'/*知会指定人员*/)}
                    </h4>
                    <a onClick={() => {this.setState({ userVisible: true })}}>
                      <Icon type="plus-circle"/> {messages('setting.key1275'/*选择人员*/)}
                    </a>
                  </div>
                  {approveUser && approveUser.map(item =>
                    <Tag
                      key={item.userOID}
                      closable
                      onClose={() => this.handleDeleteUser(item.userOID)}>
                      {item.fullName}
                    </Tag>
                  )}
                </ListItem>
                <ListItem className="user-group-approver">
                  <div>
                    <h4>
                      {personType === 1 ? messages('setting.key1276'/*指定人员组审批*/) :
                        messages('setting.key1277'/*知会指定组人员*/)}
                    </h4>
                    <a onClick={() => {this.setState({ userGroupVisible: true })}}>
                      <Icon type="plus-circle"/> {messages('setting.key1278'/*选择人员组*/)}
                    </a>
                  </div>
                  <div style={{ marginBottom: 5 }}>{messages('setting.key1279'/*只能引用到人员组中*/)}</div>
                  {approveUserGroup && approveUserGroup.map(item =>
                    <Tag key={item.userGroupOID} closable onClose={() => this.handleDeleteUserGroup(item.userGroupOID)}>
                      {item.name}
                    </Tag>
                  )}
                </ListItem>
              </List>
            </If>
            <If value={ personType === 3 }>
              <List itemLayout="horizontal">
                <ListItem className="dep-by-applicant">
                  <h4>{messages('setting.key2193')/*按角色审核*/}</h4>
                  <TagSelect
                    value={financeKeys}
                    onChange={value => this.setState({ financeKeys: value })}>
                    {(workflowFinanceRoleList || []).map(item => (
                      <TagSelect.Option value={item.id} key={item.id}>{item.permissionName}</TagSelect.Option>
                    ))}
                  </TagSelect>
                </ListItem>
              </List>
            </If>
          </Spin>
        </Modal>
        <ListSelector
          visible={userVisible}
          type="user"
          valueKey="userOID"
          labelKey="fullName"
          onlyNeed="userOID"
          showDetail
          extraParams={{ roleType: 'TENANT' }}
          selectedData={approveUser}
          onOk={this.handleAddUser}
          onCancel={() => {this.setState({ userVisible: false })}}
        />
        <ListSelector
          visible={userGroupVisible}
          type="user_group"
          valueKey="userGroupOID"
          labelKey="name"
          selectedData={approveUserGroup}
          onOk={this.handleAddUserGroup}
          onCancel={() => {this.setState({ userGroupVisible: false })}}
        />
      </div>
    )
  }
}

NewAddPersonModal.propTypes = {
  visible: React.PropTypes.bool,
  personType: React.PropTypes.number, //1 审批，2 知会 3审核
  ruleBranchApprover: React.PropTypes.object,
  ruleApprovalNodeOID: React.PropTypes.string,
  formInfo: React.PropTypes.object,
  onSelect: React.PropTypes.func,
  onDelete: React.PropTypes.func,
};

NewAddPersonModal.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    workflowDepartmentPosition: state.cache.workflowDepartmentPosition,
    workflowApproverType: state.cache.workflowApproverType,//审批类型
    workflowRoleList: state.cache.workflowRoleList,//功能角色
  }
}

const wrappedNewAddPersonModal = Form.create()(NewAddPersonModal);

export default connect(mapStateToProps)(wrappedNewAddPersonModal)
